import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store";
import ElementUI from "element-ui";

Vue.use(VueRouter)

const routes = [

  //  一级路由
  // {
  //   path: '/',
  //   name: 'Manage',
  //   component: () => import('../views/Manage.vue'),
  //   redirect: "/home",
  //
  //   children: [
  //     //  二级路由                                                                         //路由元信息
  //     { path: 'home', name: '首页', component: () => import('../views/Home.vue'), meta:{title:'首页'}},
  //     { path: 'user', name: '用户管理', component: () => import('../views/User.vue'), meta:{title:'用户管理'}},
  //     { path: 'role', name: '角色管理', component: () => import('../views/Role.vue'), meta:{title:'角色管理'}},
  //     { path: 'menu', name: '菜单管理', component: () => import('../views/Menu.vue'), meta:{title:'角色管理'}},
  //     { path: 'person', name: '个人信息', component: () => import('../views/Person.vue'), meta:{title:'个人信息'}},
  //     { path: 'file', name: '文件管理', component: () => import('../views/File.vue'), meta:{title:'个人信息'}},
  //   ]
  // },
  //登入注册是静态路由
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta:{title:'登入'}
  },

  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    meta:{title:'注册'}
  },
  {
    path: '*',
    name: '404',
    component: () => import('../views/404.vue')
  },




]

const router = new VueRouter({
  //工作模式
  mode: 'history',

  /*
    默认值: “/”
    应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”
  */
  base: process.env.BASE_URL,
  routes
})

// 提供一个重置路由的方法,给vuex用
export const resetRouter = () => {
  router.matcher = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
}

// 注意：刷新页面会导致页面路由重置
export const setRoutes = () => {
  const menus = JSON.parse(localStorage.getItem("menus"))
    //登入的时候设置过一次，刷新也设置，
    // 获取当前的路由对象名称数组
    const currentRouteNames = router.getRoutes().map(v => v.name)
    //  如果没有以前的路由，就添加
    if (!currentRouteNames.includes('Manage')) {
      if (menus) {
        // 拼装动态路由
        const manageRoute = { path: '/', name: 'Manage', component: () => import('../views/Manage.vue'), redirect: "/home", children: [
            { path: 'person', name: '个人信息', component: () => import('../views/Person.vue')},
            { path: 'password', name: '修改密码', component: () => import('../views/Password.vue')},
          ] }

        menus.forEach(item => {
          // 当且仅当path不为空的时候才去设置路由
          if (item.path) {
            //设置二级路由
            let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue'), meta:{title: item.name}}
            manageRoute.children.push(itemMenu)
          } else if(item.children.length) {
            //设置三级路由u
            item.children.forEach(item => {
              if (item.path) {
                let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue'), meta:{title: item.name}}
                manageRoute.children.push(itemMenu)
              }
            })
          }
        })


      // 动态添加到现在的路由对象中去
      router.addRoute(manageRoute)
    }

  }
}

// 刷新页面 重置路由我就再set一次路由
setRoutes()


//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next) => {
  localStorage.setItem("currentPathName", to.name)  // 设置当前的路由名称，为了在Header组件中去使用
  store.commit("setPath")  // 触发store的数据更新
  //不是去登入页也不是去注册页
  if(to.name !== "Login" && to.name !== "Register"){
    let userJson = localStorage.getItem("user")
    if (!userJson) {
      ElementUI.Message.error("请登入")
      next("/login")
    }
  }

  next()  // 放行路由
})


//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
  document.title = to.meta.title || '订餐'
})


export default router
